<template>
  <list-frame :show-advance-query="false" :total="query.total" :table-data="list" :columns="columns"
    @page-changed="pageChanged" @size-changed="sizeChanged" @query="onQuery" :show-index="false"
    :show-selection="false">
    <template #base>
      <el-select @change="onQuery" v-model="query.logType" placeholder="选择日志类别" style="width: 180px;margin-left: 4px;"
        clearable>
        <el-option v-for="item in logTypeList" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      <zw-date-range-picker style="width: 360px;margin-left: 4px;" v-model="queryDate"
        seperator="-"></zw-date-range-picker>
    </template>
    <template #operations="row">
      <el-button link type="primary" size="default" @click.stop="onDetail(row)">查看堆栈日志</el-button>
    </template>
    <template #dialog>
      <el-dialog v-model="dialogVisible" title="堆栈日志" width="800" :show-close="false" :close-on-click-modal="false">
        <el-scrollbar height="400px">
          {{ current?.exStackTrace }}
        </el-scrollbar>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="onCopy">
              复制
            </el-button>
          </div>
        </template>
      </el-dialog>
    </template>
  </list-frame>
</template>
<script lang="ts" setup>
import type { ColumnType } from '@/components/types';
import ListFrame from '@/components/ListFrame/ListFrame.vue';
import ZwDateRangePicker from '@/components/Form/ZwDateRangePicker.vue';
import ApiTree from '@/server/api-tree';
import { onMounted, ref, watch } from 'vue';
import type { ExceptionLogDTO, QueryExLogVO } from '@/server/log/types';
import { ElMessage } from 'element-plus';
/** 表格属性 */
const columns = ref<ColumnType[]>([
  { prop: "id", colName: "流水号", width: 100 },
  { prop: "logType", colName: "日志类型", width: 180 },
  { prop: "exMessage", colName: "异常信息", width: 0 },
  { prop: "logTime", colName: "异常发生时间", width: 180 },
  { prop: "logUser", colName: "操作人", width: 120 },
]);
/** 查询列表 */
const query = ref<QueryExLogVO>({
  logType: "",
  exMessage: "",
  logTimeStart: "",
  logTimeEnd: "",
  pageNo: 1,
  pageSize: 30,
  total: 0
})
const queryDate = ref<string[]>([]);
watch(() => queryDate.value, () => {
  if (queryDate.value.length === 2) {
    query.value.logTimeStart = queryDate.value[0];
    query.value.logTimeEnd = queryDate.value[1]
  } else {
    query.value.logTimeStart = "";
    query.value.logTimeEnd = ""
  }
})
const list = ref<ExceptionLogDTO[]>([])
const getExceptionLogList = async () => {
  const { data, totalCount } = await ApiTree.log.getExLog(query.value);
  if (data) {
    list.value = data;
    query.value.total = totalCount;
  }
}
const pageChanged = (pageNo: number) => {
  query.value.pageNo = pageNo;
  getExceptionLogList();
}
const sizeChanged = (pageSize: number) => {
  query.value.pageSize = pageSize;
  getExceptionLogList();
}
const onQuery = () => {
  query.value.pageNo = 1;
  getExceptionLogList();
}
/** 获取字典类别列表 */
const logTypeList = ref<string[]>([])
const getLogTypes = async () => {
  const { success, data } = await ApiTree.log.getExLogTypes();
  if (success) {
    logTypeList.value = data;
  }
}
/** 显示堆栈信息 */
const dialogVisible = ref(false)
const current = ref<ExceptionLogDTO>();
const onCopy = () => {
  if (navigator.clipboard) {
    if (!current.value) return;
    navigator.clipboard.writeText(current.value.exStackTrace)
      .then(() => {
        ElMessage.success('已复制！');
      })
      .catch(() => {
        ElMessage.error(`复制失败！`);
      });
  } else {
    ElMessage.error("浏览器不支持剪贴板！");
  }
}
const onDetail = (row: { value: ExceptionLogDTO }) => {
  const data = row.value;
  current.value = data;
  dialogVisible.value = true;
}
onMounted(() => {
  getLogTypes();
  getExceptionLogList();
})
</script>
<style lang="scss" scope></style>
